<template>
  <!-- 发红包结果页 -->
  <b-container id="send-result" class="page-content">
    <div v-if="txhash">
      <b-alert variant="success" show
        >红包发送成功，请等待链上交易确认成功后，再分享给你的好友把！</b-alert
      >

      <p>
        当前交易状态：
        <b-overlay
          :show="txStatus == '0x0'"
          rounded
          opacity="0.2"
          spinner-small
          spinner-variant="primary"
          class="d-inline-block"
        >
          <b-badge variant="warning" v-if="txStatus == '0x0'">确认中</b-badge>
        </b-overlay>
        <b-badge variant="success" v-if="txStatus == '0x1'">确认成功</b-badge>
      </p>
      <p class="alert alert-warning" v-if="txStatus == '0x0'">
        如果不想等待，可稍后在我的红包页面查看此红包
      </p>
      <div
        class="text-center"
        v-if="txStatus == '0x1'"
        style="padding-top:20px;"
      >
        <b-button variant="danger" size="sm" @click.prevent.stop="goMyPackage()"
          >查看我的红包</b-button
        >
      </div>
    </div>
    <div v-if="code">
      <p><b>复制以下内容分享给你的好友吧！</b></p>
      <p class="text-muted" style="font-size:13px">
        请忽略内容中的乱码，复制到微信中即可正常显示！
      </p>
      <b-form>
        <b-form-group>
          <b-form-textarea
            id="share-content"
            v-model="shareText"
            rows="11"
          ></b-form-textarea>
          <p
            class="text-muted"
            style="padding-top:8px;"
            v-if="!$root.nickname"
            @click="goNickname()"
          >
            你还没有设置昵称，请注意修改最前面的用户昵称！<span
              class="text-primary"
              >立即设置昵称</span
            >
          </p>
        </b-form-group>
      </b-form>
      <div class="text-center" style="padding-top:20px;">
        <b-button id="copy2clipboard" data-clipboard-target="#share-content"
          >复制内容</b-button
        >
        <b-tooltip target="copy2clipboard" triggers="click">
          复制成功
        </b-tooltip>
      </div>
    </div>
  </b-container>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
  methods: {
    goNickname() {
      this.$router.push({ name: "Nickname" });
    },
    goMyPackage() {
      this.$router.push({ name: "MyPackage" });
    },
    buildShareText() {
      let currency = this.$route.query.currency,
        code = this.$route.query.code;
      if (!code) {
        return;
      }
      this.shareText = this.shareText
        .replace("{nickname}", this.$root.nickname || "我")
        .replace("{code}", code)
        .replace("{currency}", currency);
      this.code = code;
    },
    queryTxStatus() {
      if (!this.txhash) {
        return;
      }
      this.getTransactionReceipt(this.txhash).then((res) => {
        if (!res) {
          res = { status: "0x0" };
        }
        this.txStatus = res.status;
        if (res.status == "0x0") {
          setTimeout(this.queryTxStatus, 3000);
        }
      });
    },
  },
  created() {
    this.$root.changeNavTitle("发红包");
    new ClipboardJS(".btn");
    this.buildShareText();

    this.queryTxStatus();
  },
  data() {
    return {
      code: "",
      timedown: 3,
      txhash: this.$route.query.txhash,
      txStatus: "0x0",
      shareText:
        "{nickname}发了一个🧧{currency} 红包🧧，快打开 SERO Popup 手机钱包找到SERO红包应用，输入口令抢红包吧！\n\n红包口令：{code}\n\n🔥本红包由《最强匿名公链 SERO》强力驱动！\n\n钱包下载(请妥善保管好助记词)：\nhttps://sero.cash/app/popup.html",
      // shareText:
      // "{nickname}发了一个🧧{currency} 红包🧧，快打开 SERO Popup 手机钱包，输入口令抢红包吧！\n\n红包口令：{code}\n\n🔥本红包由《最强匿名公链 SERO》强力驱动！\n\n怎么抢红包？\n1. 打开 Popup 手机钱包\n2. 打开应用列表\n3. 在顶部输入框输入 https://anonymous2020.gitee.io/sero-redpackage/?v=3 打开红包应用\n4. 输入口令抢红包",
    };
  },
};
</script>
